<template>
  <vxe-pulldown ref="pullDown">
    <template>
      <slot name="component">
        <vxe-input
          ref="xInput"
          v-model="inputValue"
          v-bind="$attrs"
          v-on="$listeners"
          @keyup="keyupEvent"
          @focus="focusEvent"
          suffix-icon="el-icon el-icon-search"
          clearable
          @suffix-click="suffixClick"/>
      </slot>
    </template>
    <template v-slot:dropdown>
      <div class="pull-down">
        <vxe-grid
          ref="xGrid"
          size="mini"
          v-bind="$attrs"
          :data="tableData"
          :columns="tableColumn"
          :keyboard-config="{isArrow: true, isEnter: true}"
          highlight-hover-row
          highlight-current-row
          :show-header="false"
          show-overflow
          auto-resize
          height="auto"
          v-on="$listeners"
          @keydown="keyDownEvent"
          @page-change="handlePageChange"
          @cell-dblclick="cellClickEvent">
          <template v-slot:bottom>
            <div style="text-align: right;font-size: 14px; padding: 0 10px">
              <i class="vxe-icon--arrow-left prev-icon" style="padding: 10px 10px;" @click="handlePrevClick"></i>
              <i class="vxe-icon--arrow-right next-icon" style="padding: 10px 10px; margin-left: 15px;" @click="handleNextClick"></i>
            </div>
          </template>
        </vxe-grid>
      </div>
    </template>
  </vxe-pulldown>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'PullDownTable',
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    props: {
      type: Object,
      default() {
        return {
          label: 'label',
          value: 'value'
        }
      }
    },
    tableColumn: {
      type: Array,
      default() { return [] }
    },
    url: {
      type: Object,
      default: () => {
        return {
          path: '',
          params: ''
        }
      },
      required: true
    }
  },
  data() {
    return {
      inputValue: '',
      loading: false,
      tableData: [],
      hasNext: false,
      hasPrevious: false,
      pageNum: 1,
      row: {}
    }
  },
  watch: {
    row() {
      this.$emit('update:value', this.row[this.props.value])
      this.$emit('update:label', this.row[this.props.label])
    },
    value() {
      this.$emit('update:value', this.value)
    },
    label() {
      this.inputValue = this.label
      this.$emit('update:label', this.label)
    },
    hasNext() {
      let nextIconNode = document.getElementsByClassName("next-icon")[0];
      if (this.hasNext) {
        nextIconNode.className = "vxe-icon--arrow-right next-icon active";
      } else {
        nextIconNode.className = "vxe-icon--arrow-right next-icon";
      }
    },
    hasPrevious() {
      let prevIconNode = document.getElementsByClassName("prev-icon")[0];
      if (this.hasPrevious) {
        prevIconNode.className = "vxe-icon--arrow-left prev-icon active";
      } else {
        prevIconNode.className = "vxe-icon--arrow-left prev-icon";
      }
    }
  },
  mounted() {
    const postData = {}
    postData[this.props.value] = this.value
    this.loadData(postData, () => {
      this.row = this.tableData[0]
    })
  },
  methods: {
    handleNextClick() {
      if (this.hasNext) {
        this.pageNum++;
        this.loadData();
      }
    },
    handlePrevClick() {
      if (this.hasPrevious) {
        this.pageNum--;
        this.loadData();
      }
    },
    loadData(query, callback) {
      const params = Object.assign({ pageNum: this.pageNum, pageSize: 20 }, query, this.url.params)
      if (this.url) {
        this.loading = true;
        return request({
          url: this.url.path,
          method: 'get',
          params: params
        }).then((response) => {
          this.tableData = response.rows
          this.hasPrevious = response.hasPrevious;
          this.hasNext = response.hasNext;
          this.loading = false;
          if (callback) callback()
        })
      }
    },
    focusEvent() {
      this.$refs.pullDown.showPanel()
      this.loadData()
    },
    keyupEvent({ $event }) {
      // ArrowDown
      if ($event.keyCode === 40) {
        const row = this.tableData[0]
        this.$refs.xGrid.setCurrentRow(row)
        this.$refs.xInput.blur()
        this.$refs.xGrid.focus()
      } else {
        const { inputValue } = this
        const that = this
        setTimeout(() => {
          const query = {}
          query[that.props.label] = inputValue
          query[that.props.value] = inputValue
          that.loadData(query)
        }, 300)
      }
    },
    keyDownEvent({ $event }) {
      if ($event.keyCode === 13) {
        const row = this.$refs.xGrid.getCurrentRecord()
        this.cellClickEvent({ row })
      }
    },
    suffixClick() {
      this.$refs.pullDown.togglePanel()
    },
    cellClickEvent({ row }) {
      this.row = row
      this.inputValue = row[this.props.label]
      this.$refs.pullDown.hidePanel()
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.loadData()
    }
  }
}
</script>

<style scoped>
  .pull-down {
    height: 200px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    z-index: 10000;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  }

  .pull-down .prev-icon.active,
  .pull-down .next-icon.active{
    color: #409eff;
    font-weight: bold;
    cursor: pointer;
  }
</style>
